<template>
  <div class="design-header">
    <div class="header-left">
      <span class="header-logo">{{ $t(`menu.luoshu`) }}</span>
      <span class="header-title">{{ $t(`menu.pass`) }}</span>
      <a-divider class="divider" type="vertical" />
      <span class="name">{{ schemaName || schemaName2 }}</span>
    </div>
    <a-space :size="48" class="menu-group">
      <h3
        class="item"
        :class="{ active: item.key === routePath }"
        v-for="item in DesignRouter"
        :key="item.key"
        @click="onRouterClick(item.key)"
      >
        <rb-icon :type="item.icon" />
        <span class="text">{{ item.label }}</span>
      </h3>
    </a-space>
    <div class="header-right">
      <Userinfo />
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';
import { useStore } from 'vuex';
import { useRouter, useRoute } from 'vue-router';
import { DesignRouter } from '@/views/formDesign/constant';
import Userinfo from '@/components/common/Userinfo.vue';

export default defineComponent({
  name: 'DesignHeader',
  components: {
    Userinfo,
  },
  setup() {
    const store = useStore();
    const router = useRouter();
    const route = useRoute();
    const routePath = computed(() => route.path);
    const schemaName = computed(() => store.state.formDesign.form.schemaName);
    const schemaName2 = computed(() => store.state.flowDesign.form.schemaName);
    const onRouterClick = (path: string) => {
      const schemaCode: any = route.query?.schemaCode ?? '';
      router.push({ path, query: { schemaCode } });
    };

    return {
      routePath,
      schemaName,
      schemaName2,
      DesignRouter,
      onRouterClick,
    };
  },
});
</script>

<style lang="less" scoped>
.design-header {
  .flexRow();
  padding: 0 32px;
  height: 48px;
  line-height: 48px;
  background-color: @rb-primary-color;
  color: @rb-text-color-light;
  z-index: 2;
  .header-left {
    .flexRow();
    .header-logo {
      font-family: cursive;
      font-size: 22px;
      padding-right: 16px;
    }
    .header-title {
      padding-right: 8px;
      cursor: pointer;
    }
    .divider {
      border-color: @rb-text-color-light;
    }
    .name {
      padding-left: 8px;
    }
  }
  .menu-group {
    .item {
      .flexColumn(center, center);
      position: relative;
      color: @rb-text-color-light;
      cursor: pointer;
      &.active {
        &::after {
          content: 'sss';
          display: inline-block;
          position: absolute;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          height: 2px;
          bottom: -5px;
          background-color: @rb-body-background;
        }
      }
      .rb-icon {
        font-size: 16px;
        padding-bottom: 4px;
      }
      .text {
        font-size: 12px;
        line-height: 16px;
      }
    }
  }
  .header-right {
    .flexRow();
  }
}
</style>
